<template>
	<PageWrapper dense contentFullHeight contentClass="flex">
		<BasicTable @register="registerTable">
			<template #toolbar>
				<a-button type="primary" @click="handleCreate">新增字典</a-button>
			</template>
			<template #bodyCell="{column,  record }">
				<template v-if="column.key === 'action'">
					<TableAction :actions="[
						{
							icon: 'clarity:note-edit-line',
							tooltip: '修改',
							onClick: handleEdit.bind(null, record)
						},
						{
							icon: 'ant-design:copy-outlined',
							tooltip: '复制',
							popConfirm: {
								title: '是否确认复制该条数据吗？',
								confirm: handleCopy.bind(null, record)
							}
						},
						{
							icon: 'ant-design:delete-outlined',
							color: 'error',
							tooltip: '删除',
							popConfirm: {
								title: '是否确认删除',
								confirm: handleDelete.bind(null, record)
							}
						}
					]" />
				</template>
			</template>
		</BasicTable>
		<DictSubDrawer @register="registerDrawer" @success="handleSuccess" />
	</PageWrapper>
</template>
<script lang="ts">
	import { defineComponent, ref, reactive } from 'vue';
	import { PageWrapper } from '/@/components/Page';
	import { BasicTable, useTable, TableAction } from '/@/components/Table';
	import { subColumns as columns, subSearchFormSchema } from './dict.data';
	import { list, del } from '/@/api/system/dict';
	import { useDrawer } from '/@/components/Drawer';
	import DictSubDrawer from './DictSubDrawer.vue';

	import { useMessage } from '/@/hooks/web/useMessage';
	export default defineComponent({
		components: { BasicTable, PageWrapper, DictSubDrawer, TableAction },
		setup() {
			const { createMessage } = useMessage();

			let code = ref<string>('');
			let record = reactive({
				code: '',
				parentId: 0
			});
			const [registerDrawer, { openDrawer }] = useDrawer();
			const [registerTable, { reload, setProps }] = useTable({
				title: '字典项列表',
				api: list,
				columns,
				formConfig: {
					labelWidth: 80,
					showResetButton:false,
					autoSubmitOnEnter: true,
					schemas: subSearchFormSchema
				},
				useSearchForm: true,
				showTableSetting: true,
				bordered: true,
				showIndexColumn: false,
				actionColumn: {
					width: 160,
					title: '操作',
					dataIndex: 'action',
					fixed: undefined
				},
				immediate: false
			});

			function filterByDictCode(records : Recordable) {
				setProps({ searchInfo: { queryParams: { F_code_eq: records.code, F_parentId_eq: records.id } } });
				record.code = records.code;
				record.parentId = records.id;
				reload();
			}

			function handleCreate() {
				openDrawer(true, {
					record,
					isUpdate: true
				});
			}
			function handleCopy(record : Recordable) {
				let tempRecord = {
					...record,
					id: null
				}
				openDrawer(true, {
					record: tempRecord,
					isUpdate: true
				});
			}

			function handleEdit(record : Recordable) {
				openDrawer(true, {
					record,
					isUpdate: true
				});
			}

			async function handleDelete(record : Recordable) {
				await del({ ids: record.id });
				createMessage.success('删除成功!');
				handleSuccess();
			}

			function handleSuccess() {
				reload();
			}
			return {
				registerTable,
				registerDrawer,
				handleCreate,
				handleEdit,
				handleCopy,
				handleDelete,
				handleSuccess,
				filterByDictCode,
				code
			};
		}
	});
</script>